<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">

            <!--下拉框选择示例-->
            <el-form-item label="栏目级别：" prop="level">
                <el-col :span="15">
                    <el-radio v-model="form.level" label="0" @change="parentMenuChanges">父栏目</el-radio>
                    <el-radio v-model="form.level" label="1" @change="parentMenuChanges">子栏目</el-radio>
                </el-col>
            </el-form-item>
            <el-form-item label="父栏目：" prop="father" v-show="form.level != 0">
                <el-col :span="8">
                    <el-cascader
                            placeholder="选择父栏目"
                            v-model="form.father"
                            :options="temporaryFatherData"
                            change-on-select
                            :props="props">
                    </el-cascader>
                </el-col>
            </el-form-item>

            <!--单行录入示例-->
            <el-form-item label="栏目名称：" prop="name">
                <el-col :span="8">
                    <el-input v-model="form.name" placeholder="请输入栏目名称"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="跳转地址：" prop="urls">
                <el-col :span="8">
                    <el-input v-model="form.urls" placeholder="请输入跳转地址"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="显示顺序：" prop="order">
                <el-col :span="8">
                    <el-input v-model="form.order" placeholder="请输入显示顺序"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="是否显示：" prop="isShow">
                <el-col :span="15">
                    <el-radio v-model="form.isShow" label="0">是</el-radio>
                    <el-radio v-model="form.isShow" label="1">否</el-radio>
                </el-col>
            </el-form-item>

            <!--提交按钮-->
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'

    export default {
        //数据源
        data() {
            return {
                //验证规则
                rules: {
                    name: [
                        {required: true, message: '请输入栏目名称', trigger: 'blur'}
                    ],
                    urls: [
                        {required: true, message: '请输入跳转地址', trigger: 'blur'}
                    ],
                    order: [
                        {required: true, message: '请输入显示顺序', trigger: 'blur'}
                    ],
                    isShow: [
                        {required: true, message: '请选择是否显示', trigger: 'blur'}
                    ],
                },
                props: {
                    value: 'value'
                },
            }
        },
        //初始化函数
        mounted() {
            this.initData();
        },
        //计算属性
        computed: {
            ...mapState({
                form: state => state.AddColumnModule.form,
                temporaryFatherData: state => state.AddColumnModule.temporaryFatherData
            })
        },
        //组件方法
        methods: {
            // ...mapMutations()
            initData() {

                //获取菜单列表信息
                this.$myLoading.startLoading()
                this.$http.getHttp(this.$API.cmsColumnSearch + "/skip/0/limit/1000/cc_is_delete/0", rs => {
                    this.$myLoading.endLoading()
                    console.log(rs.data)
                    this.$store.commit('AddColumnModule/updateTemporaryFatherData', this.$common.arrayColumnMenu(rs.data))
                });
            },
            //添加按钮
            submitForm(form) {

                this.$refs[form].validate((valid) => {

                    if (valid) {

                        if (this.form.level == 0) {
                            this.form.father = ['0'];
                        }

                        var params = {
                            cc_fid:     this.form.father[this.form.father.length - 1],
                            cc_name:    this.form.name,
                            cc_is_show: this.form.isShow,
                            cc_url:     this.form.urls,
                            cc_order:   this.form.order,
                        }

                        this.$myLoading.startLoading()
                        this.$http.postHttp(
                            this.$API.cmsColumnAdd,
                            params,
                            rs => {
                                this.$myLoading.endLoading();
                                this.$myPop.SuccessMessage();
                                this.resetFormAll();
                                this.initData();
                            }
                        )


                    }

                })

            },
            //重置按钮
            resetForm() {
                this.$store.commit('AddColumnModule/clearForm');
            },
            //重置全部
            resetFormAll() {
                this.$store.commit('AddColumnModule/resetFormAll');
            },

            //开启三级联动 选择父级菜单
            parentMenuChanges() {
                console.log(this.form.level)
                if (this.form.level == 0) {

                } else {

                }
            },
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
</style>